<template>
    <div class="sale_where">
        <span>客户名称：</span><el-input class="sale_input" v-model="customerName"
            style="width: 240px;margin-right: 20px;" />
        <span>销售订单：</span><el-input class="sale_input" v-model="procode" style="width: 240px;margin-right: 20px;" />
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa',
        fontWeight: 'bold',
        position: 'sticky',
        top: 0
    }" :span-method="objectSpanMethod">
        <el-table-column fixed width="180px" prop="sale_order_code" label="销售单号">
            <template #default="scope">
                <el-link type="primary" @click="infoPage(scope.row.sale_order_code)">{{ scope.row.sale_order_code
                    }}</el-link>
            </template>
        </el-table-column>
        <el-table-column fixed width="180px" prop="sale_order_sign_time" label="订单签订日期">
            <template #default="scope">
                <span>{{ formatTime(scope.row.sale_order_sign_time) }}</span>
            </template>
        </el-table-column>
        <el-table-column width="180px" prop="customer_name" label="客户名称" />
        <el-table-column width="180px" prop="contacts_name" label="联系人" />
        <el-table-column width="180px" prop="contacts_phone" label="联系方式" />
        <el-table-column width="180px" prop="sale_order_dept_id" label="销售部门">
            <template #default="scope">
                <span>{{ deptValue(scope.row.sale_order_dept_id) }}</span>
            </template>
        </el-table-column>
        <el-table-column width="180px" prop="sale_order_rep_id" label="销售负责人">
            <template #default="scope">
                <span>{{ userValue(scope.row.sale_order_rep_id) }}</span>
            </template>
        </el-table-column>
        <el-table-column width="180px" prop="sale_order_total_price" label="销售金额" />
        <el-table-column width="180px" prop="create_by" label="创建人" />
    </el-table>
    <div class="pagination-wrapper">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
            :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="pageCount"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script>
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default {
    props: {
        detailsData: {
            type: String,
            required: true
        },
        orderCode: String
    },
    setup(props) {
        const tableData = ref([])
        const currentPage = ref(1)
        const pageSize = ref(5)
        const pageCount = ref(0)
        const userOptions = ref([])
        const deptOptions = ref([])
        const store = useStore()
        const router = useRouter()
        const customerName = ref('')
        const orderCode = ref('')

        onMounted(() => {
            getUser()
            getDept()
            fill()
            count()
        })

        function fill() {
            axios.get("http://localhost:5181/api/Sinv_Sale_Order/GetSinv_Sale_Infos", {
                params: {
                    currendPage: currentPage.value,
                    pageSize: pageSize.value,
                    customerName: customerName.value,
                    orderCode: orderCode.value,
                    proName: props.detailsData,
                    orderStatus: -1,
                    auditStatus: '3'
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                tableData.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        function count() {
            axios.get("http://localhost:5181/api/Sinv_Sale_Order/Sinv_Sale_OrderCOunt", {
                params: {
                    customerName: customerName.value,
                    orderCode: orderCode.value,
                    proName: props.detailsData
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                pageCount.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        function handleSizeChange(val) {
            pageSize.value = val;
            fill();
        }

        function handleCurrentChange(val) {
            currentPage.value = val;
            fill();
        }

        function getUser() {
            axios.get("http://localhost:5181/api/User/GetUsers", {
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                userOptions.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        function getDept() {
            axios.get("http://localhost:5181/api/Dept/DeptOpt", {
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                deptOptions.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        function deptValue(row) {
            if (!row) return "无";
            const parentDept = deptOptions.value.find((dept) => dept.dept_id == row)
            return parentDept ? parentDept.dept_name : "无"
        }

        function userValue(row) {
            if (!row) return "无";
            const parentUser = userOptions.value.find((user) => user.user_id == row)
            return parentUser ? parentUser.user_name : "无"
        }

        function infoPage(row) {
            store.commit("SalesOrderCode", row)
            router.push("/main/Sinv/SalesOrdereInfo")
        }

        function formatTime(time) {
            return time?.replace('T', ' ') || ''; // 安全处理空值
        }

        function query() {
            fill()
            count()
        }

        function reset() {
            customerName.value = ""
            orderCode.value = ""
            query()
        }

        return {
            tableData, currentPage, pageSize, pageCount, handleCurrentChange, handleSizeChange, userOptions, deptOptions, userValue,
            deptValue, infoPage, formatTime, customerName, orderCode, query, reset
        }
    }
}
</script>

<style scoped>
.pagination-wrapper {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    margin-top: 20px;
    /* 与表格的间距 */
}

.sale_where {
    margin: 15px 0px;
    text-align: center;
    float: left;
}
</style>